<template>
    <div>
        About page

        <ul>
            <li v-for="item in dataDetal" :key="item.id">
                <!-- 1：路由跳转并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/layout/docIndex/VueRoute/about/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link> -->

                <!-- 2：路由跳转并携带query参数，to的对象写法 -->
                <!-- <router-link :to="{
                    path:'/layout/docIndex/VueRoute/about/detail',
                    query:{
                        id: item.id,
                        title:item.title
                    }
                }">{{item.title}}</router-link> -->

                <!-- 3：命名路由跳转 -->
                <!-- <router-link 
                    :to="{
                        name:'detail',
                        query:{
                        id: item.id,
                        title:item.title
                    }
                    }"
                    
                    >
                    {{item.title}}
                    
                </router-link> -->


                <!-- 4：携带params参数，字符串写法 -->
                <!-- <router-link 
                    :to="`/layout/docIndex/VueRoute/about/mydetail/${item.id}/${item.title}`"
                    >
                    {{item.title}}
                </router-link> -->


                <!-- 5：携带params参数，对象写法，这种方式不能用path，只能用name -->
                <!-- <router-link 
                    :to="{
                        name:`mydetail`,
                        params:{
                        id: item.id,
                        title:item.title
                    }
                    }"
                    >
                    {{item.title}}
                    
                </router-link> -->
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
   data(){
       return{
           dataDetal:[
               {
                   id: "001",
                   title: "消息1"
               },
               {
                   id: "002",
                   title: "消息2"
               },
               {
                   id: "003",
                   title: "消息3"
               }
           ]
       }
   },
   mounted(){
       console.log("About page被挂载",this);
   },
   beforeDestroy(){
       console.log("About page被销毁");
   }
}
</script>